<template>
	<a-dropdown v-model="show" :trigger="['click']" overlayClassName="box-dropdown">
		<a-button class="width">
			<i class="word">
				{{
					item && item.eventAttr.attrName
						? item.eventAttr.attrName + '的' + item.aggregatorAlias
						: item.aggregatorAlias
				}}
			</i>
			<a-icon type="caret-down" class="iconfont" />
		</a-button>

		<template slot="overlay" @click="handleVisible">
			<div class="box-list" v-if="listData.props.length > 0 || listData.staidQuots.length > 0">
				<a-input-search
					class="search"
					placeholder="请输入搜索内容"
					@search="onSearch"
					@change="handleChange"
				/>
				<div class="box-menu" ref="elementHeight">
					<a-menu slot="overlay" @click="changeAggregator($event)">
						<template v-for="o in listData.staidQuots">
							<a-menu-item
								:key="o.aggregatorCode"
								:value="o.aggregatorCode"
								:title="o.aggregatorAlias"
							>
								{{ o.aggregatorAlias }}
								<a-icon type="check" class="check" />
							</a-menu-item>
						</template>

						<template v-for="obj in listData.props">
							<a-menu-item
								v-if="!obj.analysis"
								:key="obj.attrCode"
								:value="obj.attrCode"
								:title="obj.attrName"
							>
								{{ obj.attrName }}
								<a-icon type="check" class="check" />
							</a-menu-item>

							<a-sub-menu :key="obj.attrCode" v-else>
								<span slot="title">
									<span>{{ obj.attrName }}</span>
								</span>
								<a-menu-item
									class="analysis-menu"
									v-for="o in obj.analysis"
									:key="obj.attrCode + '---' + o.aggregatorCode"
									:value="obj.attrCode + '---' + o.aggregatorCode"
									:title="obj.attrName + '的' + o.aggregatorAlias"
								>
									<!-- '---' + -->
									{{ o.aggregatorAlias }}
									<a-icon type="check" class="check" />
								</a-menu-item>
							</a-sub-menu>
						</template>
					</a-menu>
				</div>
			</div>
		</template>
	</a-dropdown>
</template>

<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
import { EventsAttrListType } from '../type'
import request from '@/utils/request'
import _ from 'lodash'

@Component({
	name: 'IndicatorsAttr',
	components: {}
})
export default class extends Vue {
	@Prop() projectId!: number
	@Prop() item!: any
	@Prop() itemKey!: number
	@Prop() eventCode!: string

	private show = false
	private isSearch = ''
	private lists: any = {}
	private listData: EventsAttrListType = { props: [], staidQuots: [] }

	mounted(): void {
		this.getIndicatorAttrData()
	}

	private handleVisible() {
		this.show = true
	}
	private onSearch(value: string) {
		let resule: any = { props: [], staidQuots: [] }
		if (!_.isEmpty(value)) {
			let searchWord = value?.trim()
			const propsRes = this.listData.props.filter(obj => {
				const { attrCode, attrName } = obj
				const regExp = new RegExp(searchWord, 'i')
				return regExp.test(attrCode) || regExp.test(attrName)
			})
			const staidQuotsRes = this.listData.staidQuots.filter(obj => {
				const { aggregatorCode, aggregatorAlias } = obj
				const regExp = new RegExp(searchWord, 'i')
				return regExp.test(aggregatorCode) || regExp.test(aggregatorAlias)
			})
			resule = { props: propsRes, staidQuots: staidQuotsRes }
			this.listData = _.cloneDeep(resule)
		}
	}
	private handleChange(e: any) {
		const { value } = e.target
		if (value === '') {
			this.listData = this.lists
		}
	}

	@Emit('changeAggregator')
	private changeAggregator(e: any) {
		return { e, itemKey: this.itemKey }
	}

	// 获取指数属性下拉内容
	@Watch('projectId', { deep: true })
	@Watch('eventCode', { deep: true })
	private getIndicatorAttrData(): void {
		request('/reportservice/event/eventProperties', {
			method: 'GET',
			data: {
				projectId: this.projectId,
				eventCode: this.eventCode
			}
		}).then(({ data }) => {
			this.lists = data
			this.listData = _.cloneDeep(this.lists)
			// console.log('指数属性data: ', data)
		})
	}
}
</script>

<style lang="scss" scoped>
.width {
	width: 96px;
}
.box-list {
	width: 312px;
	height: 260px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14);
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
	background: #fff;
	overflow-y: scroll;
	.box-menu {
		height: 205px;
		overflow-y: scroll;
		margin-top: 10px;
		position: relative;

		.ant-menu {
			.ant-menu-item {
				.check {
					display: none;
				}
				&:hover {
					color: #2085ef;
					background: rgba(45, 140, 240, 0.06);
				}
				&.ant-menu-item-selected {
					color: #2085ef;
					.check {
						display: inline-block;
						position: absolute;
						top: 12px;
						right: 10px;
					}
				}
			}
		}
		.ant-menu-submenu {
			&:hover {
				background: rgba(45, 140, 240, 0.06);
			}
			.ant-menu-submenu-title {
				&:hover {
					background: rgba(45, 140, 240, 0.06);
				}
			}
		}
	}
}
.analysis-menu {
	&:hover {
		color: #2085ef;
		background: rgba(45, 140, 240, 0.06);
	}
	.check {
		display: none;
	}
	&.ant-menu-item-selected {
		color: #2085ef;
		.check {
			display: inline-block;
			position: absolute;
			top: 12px;
			right: 10px;
		}
	}
}
</style>
